<template>
    <div>
      <button v-on:click="show = !show">点击显示或者隐藏</button>
      <transition name="fade">
       <p v-show="show" v-bind:style="styleobj">动画实例</p>
      </transition>
      <button v-on:click="moveShow = !moveShow">点击 移动</button>
      <transition  name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight">
       <p v-if="moveShow">It is Time  Let us go </p>
      </transition>
      <button v-on:click="dominateShow = !dominateShow">显式的动画</button>
      <transition :duration="{enter: 2000, leave:3000}" name="fade">
       <p v-show="dominateShow" v-bind:style="styleobj">显示的动画示例</p>
      </transition>
      <button v-on:click="hookShow = !hookShow">点击测试Hook 函数是否调用</button>
      <transition name="fade" appear v-on:before-appear="customBeforeAppearHook" v-on:appear="customAppearHook"
  v-on:after-appear="customAfterAppearHook"
  v-on:appear-cancelled="customAppearCancelledHook">
       <p v-show="hookShow" v-bind:style="styleobj">hook show</p>
      </transition>
    </div>
</template>
<script>
export default {
  name: 'transitionDemo',
  data () {
    return {
      title: 'transitionDemo 测试',
      show: true,
      styleobj: {
        fontSize: '30px',
        color: 'red'
      },
      moveShow: true,
      dominateShow: true,
      hookShow: true
    }
  },
  methods: {
    totalPrice: function () {
    },
    customBeforeAppearHook: function () {
      console.log('customBeforeAppearHook')
    },
    customAppearHook: function () {
      console.log('customAppearHook')
    },
    customAfterAppearHook: function () {
      console.log('customAfterAppearHook')
    },
    customAppearCancelledHook: function () {
      console.log('customAppearCancelledHook')
    }
  }
}
</script>
<style>
/*引入指定的vue 的css 动画文件 有顺序@import;要放入自定义的样式的前面不然无效
*/
@import "https://cdn.jsdelivr.net/npm/animate.css";
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.fade-entry-active, .fade-leave-active {
  transition: opacity 2s;
}

.fade-entry, .fade-leave-to {
  opacity: 0;
}
</style>
